@{
    ViewData["Title"] = "生产计划管理";
}

<link href="~/layui/css/layui.css" rel="stylesheet" />

<style>
    .production-items, .attachments {
        max-width: 200px;
        word-wrap: break-word;
    }
    
    .production-items .badge, .attachments .badge {
        font-size: 0.75rem;
        margin-bottom: 2px;
        display: inline-block;
    }
    
    .production-items .badge, .attachments .badge {
        cursor: help;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .table th {
        white-space: nowrap;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h5 class="mb-0">
                                <i class="layui-icon layui-icon-form"></i>
                                生产计划管理
                            </h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <button type="button" class="btn btn-primary" id="btnAdd">
                                <i class="layui-icon layui-icon-add-1"></i>
                                新增计划
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- 搜索区域 -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">计划主题</span>
                                <input type="text" class="form-control" id="searchPlanSubject" placeholder="请输入计划主题">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">计划单号</span>
                                <input type="text" class="form-control" id="searchPlanOrderNumber" placeholder="请输入计划单号">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">销售订单</span>
                                <input type="text" class="form-control" id="searchSalesOrderNumber" placeholder="请输入销售订单号">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">计划状态</span>
                                <select class="form-select" id="searchPlanStatus">
                                    <option value="">全部状态</option>
                                    <option value="0">草稿</option>
                                    <option value="1">已下达</option>
                                    <option value="2">执行中</option>
                                    <option value="3">已完成</option>
                                    <option value="4">已取消</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">优先级</span>
                                <select class="form-select" id="searchPriority">
                                    <option value="">全部优先级</option>
                                    <option value="1">低</option>
                                    <option value="2">中</option>
                                    <option value="3">高</option>
                                    <option value="4">紧急</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">开始日期</span>
                                <input type="date" class="form-control" id="searchStartDate">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text">结束日期</span>
                                <input type="date" class="form-control" id="searchEndDate">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-primary me-2" id="btnSearch">
                                <i class="layui-icon layui-icon-search"></i>
                                搜索
                            </button>
                            <button type="button" class="btn btn-secondary" id="btnReset">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>

                    <!-- 数据表格 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="planTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>计划主题</th>
                                    <th>计划单号</th>
                                    <th>销售订单号</th>
                                    <th>计划状态</th>
                                    <th>优先级</th>
                                    <th>生产项目</th>
                                    <th>附件文件</th>
                                    <th>计划开始时间</th>
                                    <th>计划结束时间</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                    <th width="120">操作</th>
                                </tr>
                            </thead>
                            <tbody id="planTableBody">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页控件 -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <span class="me-2">每页显示:</span>
                                <select class="form-select form-select-sm me-2" id="pageSize" style="width: auto;">
                                    <option value="10">10</option>
                                    <option value="20" selected>20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="text-muted">条记录</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <nav aria-label="分页导航">
                                <ul class="pagination justify-content-end mb-0" id="pagination">
                                    <!-- 分页按钮将通过JavaScript动态生成 -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 计划详情模态框 -->
<div class="modal fade" id="planDetailModal" tabindex="-1" aria-labelledby="planDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="planDetailModalLabel">生产计划详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="planDetailContent">
                <!-- 计划详情内容将通过JavaScript动态加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 操作记录模态框 -->
<div class="modal fade" id="operationLogsModal" tabindex="-1" aria-labelledby="operationLogsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operationLogsModalLabel">操作记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="operationLogsContent">
                <!-- 操作记录内容将通过JavaScript动态加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // 全局变量
        let currentPage = 1;
        let pageSize = 20;
        let totalRecords = 0;
        let totalPages = 0;
        let currentPlans = [];

        // 页面加载完成后初始化
        $(document).ready(function() {
            initializePage();
            bindEvents();
            loadPlanData();
        });

        // 初始化页面
        function initializePage() {
            // 设置默认日期为空
            $('#searchStartDate').val('');
            $('#searchEndDate').val('');
        }

        // 绑定事件
        function bindEvents() {
            // 搜索按钮
            $('#btnSearch').on('click', function() {
                currentPage = 1;
                loadPlanData();
            });

            // 重置按钮
            $('#btnReset').on('click', function() {
                resetSearchForm();
                currentPage = 1;
                loadPlanData();
            });

            // 分页大小变化
            $('#pageSize').on('change', function() {
                pageSize = parseInt($(this).val());
                currentPage = 1;
                loadPlanData();
            });

            // 新增按钮
            $('#btnAdd').on('click', function() {
                window.location.href = '/Home/AddProductionPlan';
            });
        }

        // 重置搜索表单
        function resetSearchForm() {
            $('#searchPlanSubject').val('');
            $('#searchPlanOrderNumber').val('');
            $('#searchSalesOrderNumber').val('');
            $('#searchPlanStatus').val('');
            $('#searchPriority').val('');
            $('#searchStartDate').val('');
            $('#searchEndDate').val('');
        }

        // 加载生产计划数据
        function loadPlanData() {
            showLoading();
            
            const searchParams = {
                PlanSubject: $('#searchPlanSubject').val(),
                PlanOrderNumber: $('#searchPlanOrderNumber').val(),
                SalesOrderNumber: $('#searchSalesOrderNumber').val(),
                PlanStatus: $('#searchPlanStatus').val(),
                Priority: $('#searchPriority').val(),
                StartDate: $('#searchStartDate').val(),
                EndDate: $('#searchEndDate').val(),
                PageIndex: currentPage,
                PageSize: pageSize
            };

            // 移除空值参数
            Object.keys(searchParams).forEach(key => {
                if (searchParams[key] === '' || searchParams[key] === null || searchParams[key] === undefined) {
                    delete searchParams[key];
                }
            });

            $.ajax({
                url: 'http://localhost:5025/api/Plan/GetProductionPlan',
                type: 'GET',
                data: searchParams,
                timeout: 10000,
                success: function(response) {
                    console.log('API响应:', response);
                    
                    if (response.code === 200 && response.data) {
                        currentPlans = response.data;
                        totalRecords = response.data.length; // 如果API返回总数，使用response.total
                        totalPages = Math.ceil(totalRecords / pageSize);
                        
                        renderPlanTable();
                        renderPagination();
                    } else {
                        showError('加载生产计划失败：' + (response.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    console.error('API请求失败:', {xhr, status, error});
                    showError('请求失败：' + error);
                },
                complete: function() {
                    hideLoading();
                }
            });
        }

        // 渲染计划表格
        function renderPlanTable() {
            const tbody = $('#planTableBody');
            tbody.empty();

            if (!currentPlans || currentPlans.length === 0) {
                tbody.html(`
                    <tr>
                        <td colspan="12" class="text-center text-muted py-4">
                            <i class="layui-icon layui-icon-face-cry" style="font-size: 24px;"></i>
                            <div class="mt-2">暂无数据</div>
                        </td>
                    </tr>
                `);
                return;
            }

            currentPlans.forEach(plan => {
                const row = `
                    <tr>
                        <td>${plan.planSubject || '-'}</td>
                        <td>${plan.planOrderNumber || '-'}</td>
                        <td>${plan.salesOrderNumber || '-'}</td>
                        <td>
                            <span class="badge ${getStatusBadgeClass(plan.planStatus)}">
                                ${plan.planStatusName || getStatusText(plan.planStatus)}
                            </span>
                        </td>
                        <td>
                            <span class="badge ${getPriorityBadgeClass(plan.priority)}">
                                ${plan.priorityName || getPriorityText(plan.priority)}
                            </span>
                        </td>
                        <td>
                            <div class="production-items">
                                ${renderProductionItemsList(plan.productionItems)}
                            </div>
                        </td>
                        <td>
                            <div class="attachments">
                                ${renderAttachmentsList(plan.attachments)}
                            </div>
                        </td>
                        <td>${formatDateTime(plan.expectedStartDate)}</td>
                        <td>${formatDateTime(plan.expectedEndDate)}</td>
                        <td>${plan.createName || '-'}</td>
                        <td>${formatDateTime(plan.createDate)}</td>
                                                <td>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-info" onclick="viewPlanDetail(${plan.planId})" title="查看">
                                    <i class="layui-icon layui-icon-eye"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-warning" onclick="editPlan(${plan.planId})" title="编辑">
                                    <i class="layui-icon layui-icon-edit"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-secondary" onclick="viewOperationLogs(${plan.planId})" title="操作记录">
                                    <i class="layui-icon layui-icon-log"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
        }

        // 渲染分页
        function renderPagination() {
            const pagination = $('#pagination');
            pagination.empty();

            if (totalPages <= 1) {
                return;
            }

            // 上一页
            const prevDisabled = currentPage === 1 ? 'disabled' : '';
            pagination.append(`
                <li class="page-item ${prevDisabled}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>
                </li>
            `);

            // 页码
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);

            for (let i = startPage; i <= endPage; i++) {
                const active = i === currentPage ? 'active' : '';
                pagination.append(`
                    <li class="page-item ${active}">
                        <a class="page-link" href="#" onclick="changePage(${i})">${i}</a>
                    </li>
                `);
            }

            // 下一页
            const nextDisabled = currentPage === totalPages ? 'disabled' : '';
            pagination.append(`
                <li class="page-item ${nextDisabled}">
                    <a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>
                </li>
            `);
        }

        // 切换页面
        function changePage(page) {
            if (page < 1 || page > totalPages) {
                return;
            }
            currentPage = page;
            loadPlanData();
        }

        // 查看计划详情
        function viewPlanDetail(planId) {
            const plan = currentPlans.find(p => p.planId === planId);
            if (!plan) {
                alert('未找到计划信息');
                return;
            }

            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>基本信息</h6>
                        <table class="table table-borderless">
                            <tr><td><strong>计划主题:</strong></td><td>${plan.planSubject || '-'}</td></tr>
                            <tr><td><strong>计划单号:</strong></td><td>${plan.planOrderNumber || '-'}</td></tr>
                            <tr><td><strong>销售订单号:</strong></td><td>${plan.salesOrderNumber || '-'}</td></tr>
                            <tr><td><strong>关联项目:</strong></td><td>${plan.relatedProjectName || '-'}</td></tr>
                            <tr><td><strong>生产线:</strong></td><td>${plan.productionLine || '-'}</td></tr>
                            <tr><td><strong>单据日期:</strong></td><td>${formatDateTime(plan.documentDate)}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>计划信息</h6>
                        <table class="table table-borderless">
                            <tr><td><strong>计划状态:</strong></td><td><span class="badge ${getStatusBadgeClass(plan.planStatus)}">${plan.planStatusName || getStatusText(plan.planStatus)}</span></td></tr>
                            <tr><td><strong>优先级:</strong></td><td><span class="badge ${getPriorityBadgeClass(plan.priority)}">${plan.priorityName || getPriorityText(plan.priority)}</span></td></tr>
                            <tr><td><strong>计划开始时间:</strong></td><td>${formatDateTime(plan.expectedStartDate)}</td></tr>
                            <tr><td><strong>计划结束时间:</strong></td><td>${formatDateTime(plan.expectedEndDate)}</td></tr>
                            <tr><td><strong>备注:</strong></td><td>${plan.remarks || '-'}</td></tr>
                        </table>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-12">
                        <h6>生产项目</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>项目编号</th>
                                        <th>项目名称</th>
                                        <th>规格型号</th>
                                        <th>单位</th>
                                        <th>物品分类</th>
                                        <th>计划数量</th>
                                        <th>已完成数量</th>
                                        <th>完成率</th>
                                        <th>排序</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${renderProductionItems(plan.productionItems)}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-12">
                        <h6>附件信息</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>文件名</th>
                                        <th>文件大小</th>
                                        <th>文件类型</th>
                                        <th>上传时间</th>
                                        <th>上传人</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${renderAttachments(plan.attachments)}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;

            $('#planDetailContent').html(content);
            $('#planDetailModal').modal('show');
        }

        // 渲染生产项目列表（用于表格显示）
        function renderProductionItemsList(items) {
            if (!items || items.length === 0) {
                return '<span class="text-muted">暂无项目</span>';
            }

            if (items.length === 1) {
                return `<span class="badge bg-primary">${items[0].itemName || items[0].itemNumber || '未命名项目'}</span>`;
            }

            const firstItem = items[0];
            const remainingCount = items.length - 1;
            
            return `
                <span class="badge bg-primary">${firstItem.itemName || firstItem.itemNumber || '未命名项目'}</span>
                <span class="badge bg-secondary ms-1" title="${items.slice(1).map(item => item.itemName || item.itemNumber || '未命名项目').join(', ')}">
                    +${remainingCount}
                </span>
            `;
        }

        // 渲染附件列表（用于表格显示）
        function renderAttachmentsList(attachments) {
            if (!attachments || attachments.length === 0) {
                return '<span class="text-muted">暂无附件</span>';
            }

            if (attachments.length === 1) {
                return `<span class="badge bg-info">${attachments[0].fileName || '未命名文件'}</span>`;
            }

            const firstFile = attachments[0];
            const remainingCount = attachments.length - 1;
            
            return `
                <span class="badge bg-info">${firstFile.fileName || '未命名文件'}</span>
                <span class="badge bg-secondary ms-1" title="${attachments.slice(1).map(att => att.fileName || '未命名文件').join(', ')}">
                    +${remainingCount}
                </span>
            `;
        }

        // 渲染生产项目（用于详情模态框）
        function renderProductionItems(items) {
            if (!items || items.length === 0) {
                return '<tr><td colspan="9" class="text-center text-muted">暂无生产项目</td></tr>';
            }

            return items.map(item => `
                <tr>
                    <td>${item.itemNumber || '-'}</td>
                    <td>${item.itemName || '-'}</td>
                    <td>${item.specificationModel || '-'}</td>
                    <td>${item.unit || '-'}</td>
                    <td>${item.itemCategory || '-'}</td>
                    <td>${item.plannedQuantity || 0}</td>
                    <td>${item.completedQuantity || 0}</td>
                    <td>${item.completionRate || 0}%</td>
                    <td>${item.sortOrder || 0}</td>
                </tr>
            `).join('');
        }

        // 渲染附件
        function renderAttachments(attachments) {
            if (!attachments || attachments.length === 0) {
                return '<tr><td colspan="5" class="text-center text-muted">暂无附件</td></tr>';
            }

            return attachments.map(attachment => `
                <tr>
                    <td>${attachment.fileName || '-'}</td>
                    <td>${attachment.fileSizeText || '-'}</td>
                    <td>${attachment.fileType || '-'}</td>
                    <td>${formatDateTime(attachment.uploadDate)}</td>
                    <td>${attachment.uploadBy || '-'}</td>
                </tr>
            `).join('');
        }

        // 编辑计划
        function editPlan(planId) {
            window.location.href = `/Home/UpdateProductionPlan?planId=${planId}`;
        }

        // 查看操作记录
        function viewOperationLogs(planId) {
            loadOperationLogs(planId);
        }

        // 加载操作记录
        function loadOperationLogs(planId) {
            // 显示加载状态
            $('#operationLogsContent').html(`
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <div class="mt-2 text-muted">正在加载操作记录...</div>
                </div>
            `);
            
            // 显示模态框
            $('#operationLogsModal').modal('show');

            // 发送请求获取操作记录
            $.ajax({
                url: `http://localhost:5025/api/Plan/GetProductionPlanOperationLogs?planId=${planId}`,
                type: 'GET',
                timeout: 10000,
                success: function(response) {
                    console.log('操作记录API响应:', response);
                    
                    if (response.code === 200 && response.data) {
                        renderOperationLogs(response.data, planId);
                    } else {
                        showOperationLogsError('加载操作记录失败：' + (response.msg || '未知错误'));
                    }
                },
                error: function(xhr, status, error) {
                    console.error('操作记录API请求失败:', {xhr, status, error});
                    showOperationLogsError('请求失败：' + error);
                }
            });
        }

        // 渲染操作记录
        function renderOperationLogs(logs, planId) {
            if (!logs || logs.length === 0) {
                $('#operationLogsContent').html(`
                    <div class="text-center py-4">
                        <i class="layui-icon layui-icon-face-cry" style="font-size: 48px; color: #ccc;"></i>
                        <div class="mt-3 text-muted">暂无操作记录</div>
                    </div>
                `);
                return;
            }

            const content = `
                <div class="mb-3">
                    <h6>生产计划ID: ${planId} 的操作记录</h6>
                    <small class="text-muted">共 ${logs.length} 条记录</small>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th width="100">操作类型</th>
                                <th width="200">操作描述</th>
                                <th width="120">操作前状态</th>
                                <th width="120">操作后状态</th>
                                <th width="100">操作人</th>
                                <th width="150">操作时间</th>
                                <th width="120">IP地址</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${logs.map(log => `
                                <tr>
                                    <td>
                                        <span class="badge ${getOperationTypeBadgeClass(log.operationType)}">
                                            ${log.operationTypeName || '未知'}
                                        </span>
                                    </td>
                                    <td>${log.operationDescription || '-'}</td>
                                    <td>
                                        <span class="badge ${getStatusBadgeClass(log.beforeStatus)}">
                                            ${log.beforeStatusName || '未知'}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge ${getStatusBadgeClass(log.afterStatus)}">
                                            ${log.afterStatusName || '未知'}
                                        </span>
                                    </td>
                                    <td>${log.operatorName || '-'}</td>
                                    <td>${formatDateTime(log.operationTime)}</td>
                                    <td>${log.ipAddress || '-'}</td>
                                    <td>${log.remarks || '-'}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            `;
            
            $('#operationLogsContent').html(content);
        }

        // 显示操作记录错误
        function showOperationLogsError(message) {
            $('#operationLogsContent').html(`
                <div class="text-center py-4">
                    <i class="layui-icon layui-icon-face-cry" style="font-size: 48px; color: #dc3545;"></i>
                    <div class="mt-3 text-danger">${message}</div>
                </div>
            `);
        }

        // 获取操作类型徽章样式
        function getOperationTypeBadgeClass(operationType) {
            const typeMap = {
                0: 'bg-secondary',    // 未知
                1: 'bg-success',      // 创建
                2: 'bg-warning',      // 编辑
                3: 'bg-info',         // 删除
                4: 'bg-primary',      // 审核
                5: 'bg-danger'        // 其他
            };
            return typeMap[operationType] || 'bg-secondary';
        }



        // 获取状态徽章样式
        function getStatusBadgeClass(status) {
            const statusMap = {
                0: 'bg-secondary',    // 草稿
                1: 'bg-primary',      // 已下达
                2: 'bg-warning',      // 执行中
                3: 'bg-success',      // 已完成
                4: 'bg-danger'        // 已取消
            };
            return statusMap[status] || 'bg-secondary';
        }

        // 获取状态文本
        function getStatusText(status) {
            const statusMap = {
                0: '草稿',
                1: '已下达',
                2: '执行中',
                3: '已完成',
                4: '已取消'
            };
            return statusMap[status] || '未知';
        }

        // 获取优先级徽章样式
        function getPriorityBadgeClass(priority) {
            const priorityMap = {
                1: 'bg-success',      // 低
                2: 'bg-info',         // 中
                3: 'bg-warning',      // 高
                4: 'bg-danger'        // 紧急
            };
            return priorityMap[priority] || 'bg-secondary';
        }

        // 获取优先级文本
        function getPriorityText(priority) {
            const priorityMap = {
                1: '低',
                2: '中',
                3: '高',
                4: '紧急'
            };
            return priorityMap[priority] || '未知';
        }

        // 格式化日期时间
        function formatDateTime(dateTimeString) {
            if (!dateTimeString) return '-';
            try {
                const date = new Date(dateTimeString);
                return date.toLocaleString('zh-CN', { 
                    year: 'numeric', 
                    month: '2-digit', 
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            } catch (e) {
                return dateTimeString;
            }
        }

        // 显示加载状态
        function showLoading() {
            $('#planTableBody').html(`
                <tr>
                    <td colspan="10" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <div class="mt-2 text-muted">正在加载数据...</div>
                    </td>
                </tr>
            `);
        }

        // 隐藏加载状态
        function hideLoading() {
            // 加载状态会在renderPlanTable中处理
        }

        // 显示错误信息
        function showError(message) {
            $('#planTableBody').html(`
                <tr>
                    <td colspan="10" class="text-center text-danger py-4">
                        <i class="layui-icon layui-icon-face-cry" style="font-size: 24px;"></i>
                        <div class="mt-2">${message}</div>
                    </td>
                </tr>
            `);
        }
    </script>
} 